<script>
import REGEXP from '@/utils/regexp';
/* IFTRUE_ONLY_NANCHANG
import { loadLastReportUser } from '@/api/enterpriseQuarterlyReport2'
FITRUE_ONLY_NANCHANG */

/* IFTRUE_NOT_NANCHANG */
import { loadLastReportUser } from '@/api/enterpriseQuarterlyReport'
/* FITRUE_NOT_NANCHANG */

export default {
  name: 'report-person',
  props: {
    readonly: Boolean,
    isKept: Boolean,
    informer: {
      type: Object,
      default () {
        return {
          principal: '',
          informant: '',
          telephone: '',
          date: this.$dayjs().format('YYYY-MM-DD'),
        }
      }
    }
  },
  data () {
    return {
      handle: undefined,
      form: {
        principal: this.informer.principal,
        informant: this.informer.informant,
        telephone: this.informer.telephone,
        date: this.informer.date,
      },
      defaults: {
        principal: '',
        informant: '',
        telephone: '',
        date: ''
      },
      rules: {
        principal: [
          { required: true, message: '请输入填报负责人', trigger: 'blur' }
        ],
        informant: [
          { required: true, message: '请输入填报人', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入填报人电话', trigger: 'blur' },
          { pattern: REGEXP.SOLID_PHONE_FULL, message: '格式不对' }
        ],
        date: [
          { required: true, message: '请输入填报日期', trigger: 'blur' }
        ]
      },
      error1: false,
      error2: false,
      error3: false,
      error4: false,
    }
  },
  watch: {
    informer () {
      if (this.isKept) return
      this.form.principal = this.informer.principal || this.defaults.principal
      this.form.informant = this.informer.informant || this.defaults.informant
      this.form.telephone = this.informer.telephone || this.defaults.telephone
      this.form.date = this.informer.date || this.defaults.date
    },
    'form.telephone': function (val) {
      this.form.telephone = val.replace(/[^\d-]/g, '')
      this.error3 = !REGEXP.SOLID_PHONE_FULL.test(val)
    },
    'form.principal': function (val) {
      // this.error1 = !REGEXP.CHINESE.test(val)
      this.error1 = (val === '' || val == null);
    },
    'form.informant': function (val) {
      // this.error2 = !REGEXP.CHINESE.test(val)
      this.error2 = (val === '' || val == null);
    },
    'form.date': function (val) {
      this.error4 = !REGEXP.YYYY_MM_DD.test(val)
    }
  },
  methods: {
    validate () {
      let isValid = false
      const { principal, informant, telephone, date } = this.form
      if (!principal) this.$message.warning('请输入填报负责人');
      else if (!informant) this.$message.warning('请输入填报人');
      else if (!telephone) this.$message.warning('请输入填报人电话');
      else if (!REGEXP.SOLID_PHONE_FULL.test(telephone)) this.$message.warning('填报人电话格式不对');
      else if (!date) this.$message.warning('请输入填报日期');
      if (
        principal && informant && telephone && date &&
        REGEXP.SOLID_PHONE_FULL.test(telephone)
      ) {
        isValid = true
      }
      return isValid
    },
    getData () {
      return {
        personInCharge: this.form.principal,
        informer: this.form.informant,
        telephone: this.form.telephone,
        fillInDate: this.form.date,
      }
    },
    async getDefaults () {
      try {
        const { data } = await loadLastReportUser()
        if (data) {
          this.defaults = {
            ...this.defaults,
            principal: data.personInCharge,
            informant: data.informer,
            telephone: data.telephone,
            date: data.fillInDate || this.$dayjs().format('YYYY-MM-DD')
          }
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.getDefaults();
    this.handle = this.$refs.handle
  }
}
</script>

<template>
  <div class="report-person">
    <el-form ref="formRef" inline :model="form" :show-message="false">
      <el-form-item label="填报负责人" required >
        <el-input type="text" class="report-input" :class="{'invalid-input': error1}" v-model="form.principal" :readonly="readonly" placeholder="请输入填报负责人"></el-input>
      </el-form-item>
      <el-form-item label="填报人" required >
        <el-input type="text" class="report-input" :class="{'invalid-input': error2}" v-model="form.informant" :readonly="readonly" placeholder="请输入填报人"></el-input>
      </el-form-item>
      <el-form-item label="电话" required >
        <el-input type="text" class="report-input" :class="{'invalid-input': error3}" placeholder="请输入座机或手机号" v-model="form.telephone" :readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item label="填报日期" required>
        <el-date-picker class="width-100" :class="{'invalid-input': error4}" type="date" v-model="form.date" :readonly="readonly" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :clearable="false" placeholder="请选择填报日期"></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.report-person {
  margin-top: 10px;
  padding: 0 12px;
}
.report-person-head {
  padding: 10px 15px;
  background: #eee;
  text-align: center;
  font-size: 14px;
  cursor: move;
}
.report-person ::v-deep .el-form-item {
  margin-bottom: 0;
}
.report-person ::v-deep .el-form-item__label {
  font-size: 12px;
  text-align: left;
}
</style>

<style>
.report-person .invalid-input .el-input__inner {
  background: var(--danger-color, red);
}
</style>
